<template>
  <div class='m-courseSignIn'>
    <!-- search -->
    <el-form class='m-courseSignIn_form' :inline='true' label-width="80px">
      <el-form-item label='手机号码'>
        <el-input v-model.trim='search.phone' placeholder="请输入手机号码" />
      </el-form-item>
      <el-form-item label='上课时间'>
        <el-date-picker
          v-model="search.date"
          type="date"
          value-format='timestamp'
          placeholder="选择上课时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item label='选择课程'>
        <span style='padding-right: 10px'>{{ lessonName }}</span>
        <el-button size='small' type='primary' @click='showLessonDialog'>选择课程</el-button>
      </el-form-item>
      <el-form-item label='签到状态'>
        <a-select class='form-content' v-model='search.status' :options='statusList' />
      </el-form-item>
      <div class='btnWrap'>
        <el-button @click='clearSearch'>清空</el-button>
        <el-button @click='searchFun'>搜索</el-button>
        <!-- <el-button type='primary' >批量签到</el-button> -->
      </div>
    </el-form>

    <!-- table -->
    <a-table :data='data' :cols='tableKeys'>
      <el-table-column align="center" label="操作" width='120' slot='ahead'>
        <template slot-scope="scope">
          <div>
            <el-button v-if='scope.row.isShowSignIn' size='mini' @click='signIn(scope.row)'>{{ scope.row.isSignIn ? '取消签到' : '签到'}}</el-button>
            <el-button v-if='scope.row.isShowRefund' size='mini' @click='refund(scope.row)'>{{ scope.row.isRefund ? '取消退款' : '退款' }}</el-button>
          </div>
        </template>
      </el-table-column>
    </a-table>
    <div class='u-pagination'>
      <!-- 分页 -->
      <pagination ref='page' @change='getData' :action='fetchData' :pageSize='20'></pagination>
    </div>

    <lesson-dialog ref='lessonDialog' @getData='getLessonTitle' />
  </div>
</template>

<script>
import lessonDialog from '@/module/business/course_detail_lessonDialog'
import { orderStatus } from '@/api/order'

export default {
  name: 'm-courseSignIn',

  components: {
    lessonDialog
  },

  data() {
    const filterStatus = (value) => {
      const _value = parseInt(value, 10)
      let data = orderStatus.filter(v => v.type === _value)
      data = data[0] ? data[0].desc : '订单状态异常'
      return data
    }
    const filterTime = window.$tools.filterTime
    return {
      search: {
        lessonId: '',
        status: '',
        phone: ''
      },
      lessonName: '',
      tableKeys: [
        { prop: 'buyer_phone', label: '手机号码', width: '140' },
        { prop: 'buyer_name', label: '客户名称', minWidth: '100' },
        { prop: 'order_name', label: '课程名称', minWidth: '100' },
        { prop: 'seller_name', label: '销售人员', minWidth: '100' },
        { prop: 'class_date', label: '上课时间', minWidth: '100', filter: filterTime },
        { prop: 'status', label: '签到状态', minWidth: '100', filter: filterStatus }
      ],
      data: [],
      ifRequesting: false,
      selectId: '',
      statusList: orderStatus.map(v => ({
        label: v.desc,
        value: v.type
      }))
    }
  },

  mounted() {
    this.searchFun()
  },

  methods: {
    async fetchData(aPageNum, aPageSize) {
      const { status, lessonId, phone, date } = this.search
      const params = { aMerchantId: this.aFirmId, aPageNum, aPageSize }
      if (status || status === 0) params.aOrderTypes = [status]
      if (lessonId || lessonId === 0) params.aCourseId = lessonId
      if (phone) params.aPhone = phone
      if (date) params.aClassDate = date / 1000
      return this.$api.courseGetSingleOrders(params)
    },

    getData(data) {
      data.forEach(v => {
        const status = v.status
        v.isSignIn = status === 9
        v.isRefund = status === 12
        v.isShowSignIn = status === 7 || status === 9
        v.isShowRefund = status === 6 || status === 7 || status === 12
      })
      this.data = data
    },

    clearSearch() {
      Object.keys(this.search).forEach(v => {
        this.search[v] = ''
      })
      this.lessonName = ''
      this.searchFun()
    },

    searchFun() {
      this.$refs.page.changePage()
    },

    showLessonDialog() {
      this.$refs.lessonDialog.show()
    },

    getLessonTitle({ id, name }) {
      this.lessonName = name
      this.search.lessonId = id
    },

    async signIn({ order_id, isSignIn }) {
      if (this.ifRequesting) return false
      this.ifRequesting = true
      const typeDesc = isSignIn ? '取消签到' : '签到'
      const { code } = await this.$api[isSignIn ? 'orderUnconfirmConsign' : 'orderConfirmConsign']({ aId: order_id })
      this.ifRequesting = false
      if (code === 0) {
        await this.searchFun()
        this.__notify('提示', typeDesc + '成功')
      }
    },

    async refund({ order_id, isRefund }) {
      if (this.ifRequesting) return false
      this.ifRequesting = true
      const typeDesc = isRefund ? '取消退款' : '退款'
      const { code } = await this.$api[isRefund ? 'orderUnrefund' : 'orderRefund']({ aId: order_id })
      this.ifRequesting = false
      if (code === 0) {
        await this.searchFun()
        this.__notify('提示', typeDesc + '成功')
      }
    }
  }
}
</script>

<style lang='less'>
.m-courseSignIn {
  &_form {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    .btnWrap {
      display: flex;
      // justify-content: flex-end;
      padding-bottom: 20px;
    }
  }
}
</style>